<template>
    <div>
        <van-nav-bar
  title="我的订单"
  left-text="返回"
  left-arrow
  @click-left="()=>{$router.back('/')}"
/>
<van-tabs v-model:active="active" @change="onChange">
  <van-tab title="全部"></van-tab>
  <van-tab title="待支付"></van-tab>
  <van-tab title="已支付"></van-tab>
</van-tabs>

<div v-for="key in newdata" style="border-bottom: #000 1px solid;">
<p>我的订单：{{key.orderId}}</p>
<p>订单时间：{{key.create_time}}</p>
<p>我的订单描述：{{key.product_code}}</p>
<p>我的订单价格：{{key.totalPrice}}</p>
<p>我的订单支付状态：{{key.status==0?'待支付':'已支付'}}</p>
</div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { getOrderListApi } from "@/api/api";
let mydata=ref([])
let newdata=ref([])
getOrderListApi(localStorage.getItem('username')).then(res=>{
    console.log('my',res);
    mydata.value=res.data.data
    newdata.value=mydata.value
})

const onChange=(index)=>{
    if(index==0){
        console.log(0);
        newdata.value=mydata.value
    }
    if(index==1){
        console.log(1);
        newdata.value=mydata.value.filter(i=>i.status==0)
    }
    if(index==2){
        console.log(2);
        newdata.value=mydata.value.filter(i=>i.status>=1)
    }
}
</script>

<style lang="scss" scoped>

</style>